<template>
	<view>
		<view class="lineGray marginTop"></view>
		<view class=" line textTab ">
			<view class="bigEmpty"></view>
			<view :class="{textTab1:tabIndexCategory==1}" @click="changeCategory(1)">
				<view class="padding"><text>关注我的</text></view>
				<view v-show="tabIndexCategory==1" class="line-black" style="margin-left: 20px; margin-right: 20px;">
				</view>
			</view>
			<view :class="{textTab1:tabIndexCategory==2}" @click="changeCategory(2)" class="marginLeft">
				<view class="padding"><text>我关注的</text></view>
				<view v-show="tabIndexCategory==2" class="line-black" style="margin-left: 20px; margin-right: 20px;">
				</view>
			</view>
			<view class="bigEmpty"></view>
		</view>
		<view class="lineGray marginTop"></view>
		<view v-show="tabIndexCategory==1" class=" margin-top-0 padding ">
			<view v-for="(item,index) in list1 " :key="index">
				<view class="line">
					<image class="image-head" :src="item.user.avator"></image>
					<view class="column-start marginLeft bigEmpty">
						<view class="bold">
							{{item.user.name}}
						</view>
						<view class="margin-top-0">关注了你 {{item.createTime}}</view>
					</view>
					<view class="marginLeft">
						<view v-show="item.focused" class="btnBlue line textwhite8 " @click.stop="foucus(item)">已关注
						</view>
						<view v-show="!item.focused" class="btnBlue line textwhite8" @click.stop="foucus(item)">回关
						</view>
					</view>
				</view>
				<view class="lineGray margin-top-0"></view>
			</view>
		</view>
		<view v-show="tabIndexCategory==2" class=" margin-top-0 padding">
			<view v-for="(item,index) in list2 " :key="index">
				<view class="line">
					<image class="image-head" :src="item.focusUser.avator"></image>
					<view class="column-start marginLeft bigEmpty">
						<view class="bold">
							{{item.focusUser.name}}
						</view>
						<view class="margin-top-0">关注了你 {{item.createTime}}</view>
					</view>
					<view class="marginLeft">
						<view v-show="item.focused" class="btnBlue line textwhite8 " @click.stop="foucus(item)">已关注
						</view>
						<view v-show="!item.focused" class="btnBlue line textwhite8" @click.stop="foucus(item)">关注
						</view>
					</view>

				</view>
				<view class="lineGray margin-top-0"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '/common/request.js';
	export default {
		data() {
			return {
				list1: [],
				list2: [],
				tabIndexCategory: 1,
				loading: false
			}
		},
		onShareAppMessage(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		onReady: function() {
			this.requstData();
		},
		methods: {
			foucus(item) {

				if (item.focused) {
					const url = getApp().globalData.apiUrl + "/api/v1/user/deleteFocus";
					request(url, "DELETE", {
							focusUserId: item.focusUserId,
						}, uni.getStorageSync("token"))
						.then(function(res) {
							console.log('返回正确回调', res)
							item.focused = false


						}, function(err) {
							console.log('返回错误回调', err)

						})

				} else {
					const url = getApp().globalData.apiUrl + "/api/v1/user/focus";
					request(url, "POST", {
							focusUserId: item.focusUserId,
						}, uni.getStorageSync("token"))
						.then(function(res) {
							console.log('返回正确回调', res)
							item.focused = true

						}, function(err) {
							console.log('返回错误回调', err)

						})
				}

			},

			changeCategory(num) {

				this.tabIndexCategory = num;
				this.requstData();
			},
			requstData() {
				const that = this;
				if (that.loading) {
					return
				}
				that.loading = true;
				const url = getApp().globalData.apiUrl + "/api/v1/user/focuslist";
				request(url, "GET", {
						size: 100000,
						type: that.tabIndexCategory
					}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调', res)
						that.page = that.page + 1;
						that.loading = false;
						if (that.tabIndexCategory == 1) {
							that.list1 = res.data
						} else {
							that.list2 = res.data
						}



					}, function(err) {
						console.log('返回错误回调', err)
						that.loading = false;
					})

			},
		}
	}
</script>

<style>
	@import url("../../common/uni.css");

	.btnBlue {
		width: 100rpx;
		height: 40rpx;
		border-radius: 20rpx;
		background: #0033FF;
	}


</style>